<template>
    <div class="table">
        <el-table :data="tableData" :empty-text="BaseConfig.emptyText" cell-class-name="pp"
                  header-cell-class-name="pp">
            <el-table-column fixed label="#" type="index"/>
            <el-table-column label="所属房区">
                <template #default="scope">
                    <span>
                    {{ scope.row.areaName }}区
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="房间编号">
                <template #default="scope">
                    <span>
                   {{ scope.row.name }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="房间状态" prop="status">
                <template #default="scope">
                    <el-switch v-model="scope.row.status" :active-icon="Check" :inactive-icon="Close" disabled
                               inline-prompt/>
                </template>
            </el-table-column>
            <el-table-column label="消毒状态" prop="disinfection">
                <template #default="scope">
                    <el-switch v-model="scope.row.disinfection" :active-icon="Check" :inactive-icon="Close"
                               inline-prompt
                               @change="changeDisinfection(scope.row)"/>
                </template>
            </el-table-column>
            <el-table-column label="启用时间">
                <template #default="scope">
                    {{ dealDate(scope.row.updateTime) }}
                </template>
            </el-table-column>
            <el-table-column label="备注">
                <template #default="scope">
                    <el-text truncated>
                        {{ scope.row.roomRemark }}
                    </el-text>
                </template>
            </el-table-column>
            <el-table-column class-name="search" fixed="right">
                <template #header>
                    <el-input v-model.number.trim="search" placeholder="请输入房间编号" @keydown.enter="searchById"/>
                    <el-button :icon="Refresh" circle size="small" type="info" @click="refrech"/>
                </template>
                <template #default="scope">
                    <el-button link type="primary" @click="handleClick(scope.row)">
                        查看详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="page">
        <el-pagination
                v-model:current-page="currentPage"
                :page-size="pageSize"
                :total="total"
                hide-on-single-page
                layout="total, prev, pager, next"
                @current-change="handleCurrentChange"
        />
    </div>
    <el-drawer
            v-model="drawerBool"
            :with-header="false"
            size="20%"
            @closed="closeDrawer"
    >
        <el-scrollbar>
            <el-divider content-position="left">房间详情</el-divider>
            <el-space class="span" direction="vertical">
                <el-text>{{ roomData.areaName }}区</el-text>
                <el-text>{{ roomData.name }}号房间</el-text>
                <div class="tab">
                    <div class="status">
                        <el-tag v-if="roomData.status">已启用</el-tag>
                        <el-tag v-else type="info">未启用</el-tag>
                    </div>
                    <div class="disinfection">
                        <el-tag v-if="roomData.disinfection" type="success">已消毒</el-tag>
                        <el-tag v-else type="danger">未消毒</el-tag>
                    </div>
                </div>
                <el-text class="remark">{{ roomData.roomRemark }}</el-text>
            </el-space>
            <el-divider content-position="left">居住患者基本信息</el-divider>
            <div style="min-height: 300px">
                <div v-if="roomData.status">
                    <el-form label-position="left" label-width="100px" style="padding: 0 20px">
                        <el-form-item label="姓名">
                            <el-text>{{ roomData.uname }}</el-text>
                        </el-form-item>
                        <el-form-item label="年龄">
                            <el-text>{{ roomData.age }}</el-text>
                        </el-form-item>
                        <el-form-item label="头像">
                            <el-image
                                    :preview-src-list="[`/api/images/${roomData.picture}`]"
                                    :src="`/api/images/${roomData.picture}`"
                                    :zoom-rate="1.2"
                                    fit="cover"
                                    style="width: 100px; height: 100px"
                            />
                        </el-form-item>
                        <el-form-item label="手机号码">
                            <el-text>{{ roomData.telephone }}</el-text>
                        </el-form-item>
                        <el-form-item label="手机类型">
                            <el-tag v-if="roomData.phone">智能机</el-tag>
                            <el-tag v-else type="success">老年机</el-tag>
                        </el-form-item>
                        <el-form-item label="用户备注">
                            <el-text>{{ roomData.userRemark }}</el-text>
                        </el-form-item>
                    </el-form>
                </div>
                <div v-else style="text-align: center">
                    <el-text type="info">该房间还未开启，无人居住</el-text>
                </div>
            </div>
            <el-divider content-position="left">修改房间备注</el-divider>
            <div style="padding: 0 20px;">
                <el-form>
                    <el-form-item>
                        <el-input v-model="remarkForm.roomRemark" maxlength="200" show-word-limit type="textarea"/>
                    </el-form-item>
                </el-form>
            </div>
        </el-scrollbar>
        <template #footer>
            <div style="flex: auto">
                <el-button type="primary" @click="submitRoomRemark">提交</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script lang='ts' setup>
// OK 2023-4-14 21:09:查看详情功能
import { ref } from 'vue'
import { RoomDto } from '@/ts/type'
import { RoomService } from '@/api'
import { dealDate } from '@/utils/commonUtils'
import { Check, Close, Refresh } from '@element-plus/icons-vue'
import { Message, Notification } from '@/plugins/element'
import { BaseConfig } from '@/config/config'

const search = ref<string>('')
const searchBool = ref<boolean>(false)
const drawerBool = ref<boolean>(false)
const currentPage = ref<number>(1)
const pageSize = ref<number>(14)
const total = ref<number>(0)
const tableData = ref<RoomDto[]>([])
const roomData = ref<RoomDto>({})
const remarkForm = ref<{ roomId?: number, roomRemark?: string }>({
  roomId: roomData.value.roomId as number,
  roomRemark: ''
})
// 查看详情
const handleClick = (row: RoomDto) => {
  drawerBool.value = true
  roomData.value = row
  remarkForm.value.roomId = row.roomId
}

const closeDrawer = () => {
  roomData.value = {}
  remarkForm.value = {}
}

// 分页页码的点击
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  if (searchBool.value) {
    searchById()
  } else {
    dealList()
  }
}

// 通过分页的页码与每页数据获取列表
const getList = (page: number, size: number) => {
  RoomService.getList(page, size).then(res => {
    const { total: rtotal, list } = res.data
    console.log(list)
    total.value = rtotal
    tableData.value = list
  })
}

// 修改消毒状态
const changeDisinfection = (row: RoomDto) => {
  const { roomId, name, disinfection } = row
  RoomService.changeDisinfection(roomId as number, name as string, disinfection as boolean).then(res => {
    const { data } = res
    Notification.success(data)
  })
}

// 处理获取数据的方式
const dealList = () => {
  getList(currentPage.value, pageSize.value)
}

// 搜索房间编号
const searchById = () => {
  if (search.value === '') return Notification.error('请输入正确的房间编号')
  searchBool.value = true
  RoomService.getListById(currentPage.value, pageSize.value, search.value).then(res => {
    const { total: rtotal, list } = res.data
    total.value = rtotal
    tableData.value = list
  })
}

const submitRoomRemark = () => {
  if (remarkForm.value.roomRemark === '') return Message.warning('请检查输入内容')
  RoomService.putRoomRemark(remarkForm.value.roomId as number, remarkForm.value.roomRemark as string).then(async res => {
    await dealList()
    Notification.success(res.data)
    drawerBool.value = false
  })
}

// 刷新
const refrech = () => {
  search.value = ''
  searchBool.value = false
  dealList()
}
dealList()
</script>

<style lang='scss' scoped>
:deep(.pp ) {
  text-align: center;
}

.page {
  margin: 15px auto 0;
}

.span {
  min-height: 250px;
  line-height: 2em;
  width: 100%;
  text-align: center;

  .tab {
    display: flex;

    .status, .disinfection {
      margin: 0 20px;
    }
  }

  .remark {
    text-align: justify;
    text-indent: 2em;
    padding: 0 20px;
  }
}

:deep(.search > .cell) {
  margin: auto;

  .el-input {
    width: 60%;
  }

  button {
    margin-left: 10px;
  }
}
</style>